<template>
	<view class="tree">
		<!-- 父级-tree -->
		<view v-if="!isItRecursiveCall">
			<view class="tree-father" v-for="item in treeData" :key="item.id" @click="modifyTheStatusOfTheTreeComponent(item)">
				<view style="display: flex;">
					<!-- 倒三角-打开 -->
					<u-icon style="margin-right: 20rpx;" name="arrow-down-fill" v-if="item.nodeIsFlag" color="#888" size="16"></u-icon>
					<!-- 倒三角-关闭 -->
					<u-icon style="margin-right: 20rpx;" name="arrow-up-fill" v-else color="#888" size="16"></u-icon>
					<!-- 父级-名字 -->
					<view class="father-name">{{item.name}}</view>
				</view>

				<!-- 子级组件 -->
				<view v-if="item.nodeIsFlag" style="padding-left: 50rpx;">
					<view class="sub-node" v-for="ite in item.children" :key="ite.id" @click="subLevelNodeClickVents(ite)">
						<view>
							<!-- 子级-名字 -->
							<view class="sub-name">{{ite.name}}</view>
							<!-- 详情 > -->
							<view style="display: flex;">
								<!-- 详情 -->
								<view @click="detailEvent(ite)" style="margin-right: 15rpx; color: #888; font-size: 24rpx;">详情</view>
								<!-- 倒三角-打开 -->
								<u-icon name="arrow-down" v-if="ite.nodeIsFlag" color="#888" size="16"></u-icon>
								<!-- 倒三角-关闭 -->
								<u-icon name="arrow-right" v-if="!ite.nodeIsFlag" color="#888" size="16"></u-icon>
							</view>
						</view>

						
					</view>
				</view>
			</view>
		</view>

		<!-- 子级-tree-递归组件 -->
		<view style="padding-left: 50rpx;" v-if="isItRecursiveCall && (treeData.children.children && treeData.children.children.length > 0)">
				<!-- 子级-tree -->
				<view style="padding-left: 50rpx;">
					<view class="sub-node" v-for="item in treeData.children" :key="item.id">
						<!-- 子级-名字 -->
						<view class="sub-name">{{item.name}}</view>
						<!-- 详情 > -->
						<view style="display: flex;">
							<!-- 详情 -->
							<view @click="detailEvent(ite)" style="margin-right: 15rpx; color: #888; font-size: 24rpx;">详情</view>
							<!-- 倒三角-打开 -->
							<u-icon name="arrow-down" v-if="ite.nodeIsFlag" color="#888" size="16"></u-icon>
							<!-- 倒三角-关闭 -->
							<u-icon name="arrow-right" v-if="!ite.nodeIsFlag" color="#888" size="16"></u-icon>
						</view>
					</view>
				</view>
			<treeComponent :treeData="treeData.children.children" :isItRecursiveCall="true"></treeComponent>
		</view>
	</view>
</template>

<script>
/**
 * 引入组件
 */
import treeComponent from "@/components/tree"

export default {
	/**
	 * 组件名称
	 */
	name: 'components-tree',

	/**
	 * 接受父级传递的数据
	 */
	props: {
		/* tree数据 */
		treeDataS: {
			type: Array,
			required: true
		},

		/* 是否是递归调用组件 */
		isItRecursiveCall: {
			type: Boolean,
			display: false
		}
	},

	/**
	 * 注册组件
	 */
	components: {
		treeComponent
	},

	/**
	 * 定义数据
	 */
	data () {
		return {
			/* 父节点是否展开 */
			fatherNodeFlag: true,
			treeData: this.treeDataS
		}
	},

	/**
	 * 定义方法
	 */
	methods: {
		/* 父级节点-点击事件 */
		modifyTheStatusOfTheTreeComponent (rowData) {
			console.log(this.treeData, "treeData");

			this.treeData = this.treeData.map(item => {
				if(item.id == rowData.id) {
					item.nodeIsFlag = !item.nodeIsFlag
				}
				return item
			})
		},
		
		/* 子级节点-点击事件 */
		subLevelNodeClickVents (rowData) {
			console.log(this.treeData, "treeData");
		}
	}
}
</script>

<style lang="scss" scoped>
.tree {
	.tree-father {
		display: flex;
		flex-direction: column;
	}

	.sub-node {
		display: flex;
		justify-content: space-between;
		color: #23a6ff;
	}
}

</style>